<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">状态</span>
        <span
          v-for="(item, index) in statusList"
          :key="'r' + index"
          class="select-item"
          :class="[index == statusSelect ? 'active' : 'normal']"
          style="margin-right: 40px"
          @click="statusSelectChange(index)"
        >
          {{ item.name }}
        </span>
      </div>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">类型</span>
        <Select v-model="mailTypeSelect" style="width: 150px">
          <Option
            v-for="item in mailSiteTypeList"
            :value="item.value"
            :key="item.value"
            >{{ item.name }}</Option
          >
        </Select>
        <span class="item-name">关键词</span>
        <Input
          v-model.trim="keyword"
          placeholder="请输入"
          maxlength="30"
          style="width: 150px"
        />
        <div
            class="user-strong-button line-button-size"
            style="margin: 0px 10px 0px 30px;"
            @click="pageChange(1)"
        >
          搜索
        </div>
        <div class="user-normal-button line-button-size" @click="reset">
          重置
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-s-c">
          <span class="c-black f-14"
            >搜索结果共<span class="c-black">{{
              total != null ? ` ${total} ` : ""
            }}</span
            >条</span
          >

          <div class="flx-row-s-c pub-m-l-40">
            <div v-if='isRead === 0' class="user-strong-button line-button-size" @click="setAsRead">设为已读</div>
            <div v-if='isRead === 0' class="user-strong-button line-button-size pub-m-l-20" @click="allSetAaRead">全部设为已读</div>
            <div class="user-strong-button line-button-size pub-m-l-20" @click="delectEvent">删除</div>
          </div>
        </div>
        <div class="my-domain-table">
          <Table
            :loading="loading"
            ref="pushDomianTable"
            :columns="columns"
            :data="list"
            :disabled-hover="true"
            @on-select="onSelectEvent"
            @on-select-cancel="onSelectCancelEvent"
            @on-select-all="onSelectAllEvent"
            @on-select-all-cancel="onSelectAllCancelEvent"
            stripe
          ></Table>
          <div class="form-page-bottom-area flx-row-c-c">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pullAllWith, isEqual } from "lodash";
import { mailSiteList, mailSiteType, mailSiteRead,mialSiteDel } from "@/api/user";
import accountTabList from "@/components/tabList/accountTabList";
import { mapActions } from "vuex";
export default {
  name: "VipCapitaldetails",
  components: {
    accountTabList,
  },

  data() {
    return {
      loading: false,

      breadCrumb: [{name: "管理中心"},{ name: "账户管理" }, { name: "站内信" }],
      tablist: [
        {
          name: "站内信",
          to: "/user/mail",
        },
      ],
      isRead:0,
      statusList: [
        {
          name: "未读短信",
          value: 0,
        },
        {
          name: "已读短信",
          value: 1,
        }
      ],
      mailSiteTypeList: [],

      // 表单数据

      statusSelect: 0,
      keyword: "",
      mailTypeSelect: null,

      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          width: 100,
          title: "状态",
          key: "readFlag",
          align: "center",
          render: (h, params) => {
            let title = params.row.readFlag === 0 ? '未读' :'已读' ;
            return h("span", title);
          },
        },
        {
          width: 150,
          title: "类型",
          key: "target",
          align: "center",
        },
        {
          minWidth: 200,
          title: "标题",
          key: "content",
          align: "left",
          render: (h, params) => {
            return h(
              "p",
              {
                style: {
                    padding:'10px 0',
                },
              },
              params.row.content
            );
          },
        },
        {
          width: 200,
          title: "时间",
          key: "createdTime",
          align: "left",
        }
      ],
      selectAll: false,
      // 保存选中的数据
      selectList: [],

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
    };
  },
  created() {
    this.getMailSiteType();
  },
  mounted() {
    const { tab, subTab } = this.$route.query;
    if (tab) {
      this.statusSelect = parseInt(tab);
    }
    if (subTab) {
      this.mailTypeSelect = parseInt(subTab);
    }
    this.getMailSiteList();
  },
  methods: {
    ...mapActions(["getUserData"]),
    // 获取站内信类型
    async getMailSiteType() {
      let {code,data} = await mailSiteType();
      if(code === 200){
        this.mailSiteTypeList = data
      }
    },
    // 交易类型改变
    statusSelectChange(index) {
      this.statusSelect = index;
      this.isRead=this.statusList[this.statusSelect].value
      this.pageChange(1);
    },

    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getMailSiteList();
    },
    // 重置
    reset() {
      this.keyword = "";
      this.mailTypeSelect = null;
      this.page = 1;
      this.getMailSiteList();
    },
    // 获取列表
    async getMailSiteList() {
      this.loading = true;
      let params = {
        kw: this.keyword,
        siteType: this.mailTypeSelect,
        isRead:this.statusList[this.statusSelect].value,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await mailSiteList(params);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },

    // 设为已读
    async setAsRead(){
      if(this.selectList.length <= 0){
        this.$Message.warning("请选择数据");
        return;
      }
      let msgIds = this.selectList.map(item=>item.id)
      let params = {
        msgIds:msgIds,
        isReadAll:0
      }
      const {code,data} = await mailSiteRead(params);
      if(code === 200){
        this.$Message.success("设置成功");
        this.page = 1;
        this.getMailSiteList();
        this.getUserData();
      }
    },
    // 全部设为已读
    allSetAaRead(){
      this.$Modal.confirm({
        title: "全部设为已读",
        content: "<p>确定全部设为已读吗？</p>",
        onOk: async () => {
         this.$refs.pushDomianTable.selectAll(true);
         let msgIds = this.selectList.map(item=>item.id)
          let params = {
            msgIds:msgIds,
            isReadAll:1
          }
          const {code,data} = await mailSiteRead(params);
          if(code === 200){
            this.$Message.success("设置成功");
            this.page = 1;
            this.getMailSiteList();
            this.getUserData();
          }
        },
      });
    },
    // 删除
    delectEvent(){
      if(this.selectList.length <= 0){
        this.$Message.warning("请选择数据");
        return;
      }
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除吗？</p>",
        onOk: async () => {
          let msgIds = this.selectList.map(item=>item.id)
          const res = await mialSiteDel({msgIds});
          const { code, result } = res;
          if (code === 200 && result) {
            this.$Message.success("删除成功！");
            this.page = 1;
            this.getMailSiteList();
            this.getUserData();
          }
        },
      });
    },
    // checkbox全选的数据
    onSelectAllEvent(selection) {
       this.selectList = selection;
    },
    // checkbox取消全选的数据
    onSelectAllCancelEvent() {
      this.selectList = [];
    },
    // checkbox单个选中数据
    onSelectEvent(selection, row) {
      this.selectList.push(row);
    },
    // checkbox单个取消数据
    onSelectCancelEvent(selection, row) {
      this.selectList = pullAllWith(this.selectList, [row], isEqual);
    }
  },
};
</script>
<style lang="scss" scoped>
.my-domain-table /deep/ {
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      color: #000;
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      box-sizing: border-box;
    }
    .ivu-table-row {
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
      }
    }
  }
  .tab-btn:hover {
    color: $mainColor;
    border-color: $mainColor;
  }
  .tab-btn:focus {
    box-shadow: none;
  }
}
</style>
